<template>
  <div :class="[...classes, 'titletime']" :style="styleses">
    <div style="display: inline-block; text-align: left">
      <span style="color: #ffffff">{{ numstr }}</span>
      <br />
      <span>
        <span
          class="top_runningDay"
          style="color: #53f3f3; font-weight: bold"
          >{{ numval }}</span
        >
        天
      </span>
    </div>
  </div>
</template>
<script>

import dayjs from "dayjs";

import titlemixins from "@/mixins/bigScreen/titlemixins";
export default {
  mixins: [titlemixins],
  name: "tianshunumbeijing",
  components: {},
  data() {
    return {
      numval: "-",
      numstr: "供热运行天数",
    };
  },
  computed: {},
  watch: {
    "$store.state.daping.bigScreen": {
      handler: function (n, o) {

        let n_tmp = n;
        let g_bigscreen_data_arr = n_tmp.filter((item) => {
          if (item.attrName == "start_date") {
            return true;
          }
        });

        if (g_bigscreen_data_arr.length != 1) {
          return;
        }

        this.loadData(g_bigscreen_data_arr[0].attrValue);
      },
    },
  },
  mounted() {},
  methods: {
    loadData(st) {
      let days = dayjs().diff(dayjs(st), "day");
      if (days < 0) {
        this.numstr = "供热倒计时";
        this.numval = -days;
      } else {
        this.numval = days;
      }
    },
  },
};
</script>
<style lang='scss' scoped>
</style>